import React, { Component } from 'react';

import Flex from 'antd-mobile/lib/flex';
import Button from 'antd-mobile/lib/button';
import Toast from 'antd-mobile/lib/toast';
import Modal from 'antd-mobile/lib/modal';

import 'antd-mobile/lib/flex/style/index.css';
import 'antd-mobile/lib/button/style/index.css';
import 'antd-mobile/lib/toast/style/index.css';
import 'antd-mobile/lib/modal/style/index.css'

import '../static/styles/index.css'
import '../static/styles/toast.css'

import { Link } from 'react-router-dom';

import MyGroup from '../components/MyGroup';

import { get } from  '../api/getData';

class Zhongjiang extends Component {
    constructor(props) {
        super(props);

        this.state = {
            member : [],
            price : 0,
            name  : '',
            visible : false,
            proId : this.props.match.params.pro_id
        };
    }

    componentDidMount(){
        let __this = this;

        get('/getReward' , {pro_id : __this.state.proId} , function (error , data) {
            if(error === null) {
                if (data.code === 1) {
                    __this.setState({
                        member : data.data.member,
                        product : data.data.product,
                        name : data.data.product.name,
                        datemax : data.data.product.datemax,
                        isopen : data.data.product.isopen
                    });
                    document.title = data.data.product.name;
                }
            }
        });

    }
    showModal = (e) => {
        // 现象：如果弹出的弹框上的 x 按钮的位置、和手指点击 button 时所在的位置「重叠」起来，
        // 会触发 x 按钮的点击事件而导致关闭弹框 (注：弹框上的取消/确定等按钮遇到同样情况也会如此)
        e.preventDefault(); // 修复 Android 上点击穿透
        this.setState({
            visible: true,
        });
    };
    onClose = () => {
        this.setState({
            visible: false,
        });
    };

    render() {
        return (
            <div className="content">
                {this.state.isopen ?
                    <div>
                        <div>
                            <div className="zj-title">{this.state.name }</div>
                            <div className="zj-desc">
                                <div>66个中奖团已产生，恭喜以下198位“广西电信”微信公众号粉丝，每人将获得1元购买1台小米移动电源（10000毫安）的资格！</div>
                                <div>广西电信微信公众号已在{this.state.datemax}向每位中奖粉丝发送了获奖通知。（头像昵称或有雷同，您可发送“1元团购”查询是否中奖）。</div>
                                <div>以下每一行是一个中奖团！恭喜大家！广西电信微信公众号更多粉丝活动正在进行，点击“广西电信”微信公众号“福利”菜单栏即可快速参加各项活动！奖品更劲爆！欢迎关注哦！</div>
                            </div>

                            <MyGroup num={this.state.member.length} members={this.state.member}/>

                        </div>

                        <Flex className="footer" justify="between" align="center">
                            <div style={{flex:'1'}}><Link to={`/zhongjiang/${this.state.pro_id}`}>中奖名单</Link></div>
                            {/*<div style={{flex:'1'}}><Link to="/zhongjiang">晒流量赢红包</Link></div>*/}
                            <div style={{flex:'1'}} onClick={this.showModal}>活动细则</div>
                        </Flex>

                        <Modal
                            title="活动细则"
                            transparent
                            closable={true}
                            maskClosable={true}
                            visible={this.state.visible}
                            onClose={this.onClose}
                            style={{width:'8.4rem',textAlign:'left'}}
                        >
                            <p>1.活动时间：2017年12月12日-12月22日</p>
                            <p>2.关注广西电信微信公众号即可参加。</p>
                            <p>3.参加者每人最多可创建9个新团，每人只能加入一次他人创建的团，即每个人最多共参与10个团。团内凑满三人即为满员团。创建新团和加入他人团的行为无法撤销。</p>
                            <p>4.组团成绩统计截止时间为12月22日23:59:59,截止后将从所有满员团中随机抽出66个中奖团，中奖团内每一位粉丝都可获得小米充电宝优惠购买资格一次。</p>
                            <p>5.凭券可在广西电信网厅内，以人民币1元购买小米充电宝10000毫安一台。</p>
                            <p>6.广西电信微信公众号将在2017年12月25日公布中奖名单，并微信或短信联系每位获奖粉丝，微信或短信发送优惠购买兑换码。</p>
                            <p>7.为保证活动公平公正，如使用不正当技术手段将取消其获奖用户资格。</p>
                            <p>8.客服热线：4008771189。</p>
                        </Modal>
                    </div>
                    :
                    <div className="noopen">本活动组团成绩统计截止时间为12月22日23:59:59，将在12月25日前在本页面公布中奖名单，敬请期待，祝您好运！</div>
                }
            </div>
        );
    }
}

export default Zhongjiang;
